<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <div>
        <el-skeleton-item variant="image" style="width: 800px; height: 240px" />
      </div>
    </template>
    <template #default>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="image in state.images" :key="image">
          <img :src="image.imageUrl" :alt="image.typeTitle" />
        </el-carousel-item>
      </el-carousel>
    </template>
  </el-skeleton>
</template>

<script>
import { get } from "@/request/Home/App_resData";
import { reactive, onMounted, getCurrentInstance } from "vue";
export default {
  data() {
    return {
      loading: true,
    };
  },
  setup() {
    const state = reactive({
      images: [],
    });
    onMounted(async () => {
      let dataS = getCurrentInstance().data;
      const banner = await get("/banner?type=0");
      if (banner.data.code == 200) {
        state.images = banner.data.banners;
        dataS.loading = false;
      }
    });
    return { state };
  },
};
</script>

<style lang="less" scoped>
.el-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  height: 100%;
}
</style>
